<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <ul id="city">
      <li>data1</li>
      <li id="data2">data2</li>
      <li>data3</li>
      <li>data4</li>
    </ul>
    <button>remove</button>
    <button>empty</button>
  </body>
</html>
<script>
  //创建元素
  var $li = $('<li>', {
    text: 'abc',
    title: '这是一个li',
  })
  console.log($li)
  //添加元素  dom对象添加
  $('#city').append('<li>data5</li>')
  $('#city').append($li)

  var $li2 = $('<li>', {
    text: '南京市',
    title: '这是一个li',
  })
  $li2.appendTo('#city')

  var $li3 = $('<li>', {
    text: '苏州市',
  })
  $('#city').prepend($li3)

  var $li4 = $('<li>', {
    text: '常州市',
  })
  $li4.prependTo('#city')

  $('button:eq(0)').click(function () {
    $('#data2').remove()
  })
  $('button:eq(1)').click(function () {
    // $('#data2').empty()
    $('#city').empty()
  })
</script>
